@import '../styles/themes/default.less';



.MMImagePicker {

    .content {
        display       : flex;
        flex-direction: row;
        flex-wrap     : wrap;
        width         : calc(100% + @spacingSize);
    }
}

.item {
    position        : relative;
    width           : calc((100% - @spacingSize * @imagePickerNumber) / @imagePickerNumber);
    background-color: @gray4;
    margin-right    : @spacingSize;
    margin-bottom   : @spacingSize;
    border-radius   : @borderRadiusSize;
    overflow        : hidden;
}

.itemContent {
    position      : relative;
    padding-bottom: 100%;
}

.image {
    position: absolute;
    left    : 0;
    top     : 0;
    width   : 100%;
    height  : 100%;
}

.add {
    position        : relative;
    background-color: @gray1;
    border          : 1px dashed @gray4;
    border-radius   : 0;
}

.addContent {
    position       : absolute;
    left           : 0;
    top            : 0;
    width          : 100%;
    height         : 100%;
    padding-top    : 5px;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    font-size      : 10px;
    color          : @gray4;
}

.addText {
    margin-top: 5px;
}

.delete {
    position        : absolute;
    display         : flex;
    justify-content : center;
    align-items     : center;
    z-index         : 1;
    top             : 0px;
    right           : 0px;
    width           : 20px;
    height          : 13px;
    background-color: @gray4;
    border-radius   : 0px @borderRadiusSize 0 @borderRadiusSize;
}
